<%@include file="lib.jsp"%>

<html>
	<head>
		<title>jQuery TOOLS - The missing UI library for the Web</title>
		<meta name="Description"
			content="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb" />
		<meta name="Keywords"
			content="javascript ui library, javascript library, jquery ui library, user interface library, web 2.0 ui library" />

		<meta http-equiv="Content-Type"
			content="text/html; charset=iso-8859-1" />
		<meta name="Distribution" content="Global" />
		<meta name="Author" content="Tero Piirainen" />
		<meta name="Robots" content="index,follow" />

		<link rel="shortcut icon"
			href="http://static.flowplayer.org/tools/img/favicon.ico"
			type="image/png" />
		<link rel="stylesheet" type="text/css"
			href="css/global-0.52.css" />

		<script
			src="js/jquery.tools.min.js"></script>






		<!-- site specific scripts -->
		<script type="text/javascript"
			src="js/global-0.52.js"></script>

		<script type="text/javascript">			 
		var account = {admin: false }, v = {
			ver: "3.2.3",
			core: "/swf/flowplayer-3.2.3.swf", 
			
			controls: "flowplayer.controls-3.2.2.swf",
			air:  "flowplayer.controls-air-3.2.2.swf",
			tube:  "flowplayer.controls-tube-3.2.2.swf",
			
			content: "flowplayer.content-3.2.0.swf",
			rtmp: "flowplayer.rtmp-3.2.2.swf",
			slowmotion: "flowplayer.slowmotion-3.2.0.swf",
			pseudostreaming: "flowplayer.pseudostreaming-3.2.3.swf"
		};
	</script>




		<!--[if lt IE 7]>
		<style>
			@import "http://static.flowplayer.org/css/ie6.css?v=0.2";
		</style>
	<![endif]-->

		<!--[if lt IE 8]>
		<style>
			html { overflow-x:hidden; }
			#content ol, #content ul  {margin-left: 50px; }
		</style>
	<![endif]-->

	</head>

	<body id="tools_index" class="webkit tools">

		<div id="global">

			<div class="wrap">
				<ul>
					<li>
						<a id="global_fp" href="${pageContext.request.contextPath }/index.jsp">Index</a>
					</li>
					<li>
						<a id="global_jt" href="${pageContext.request.contextPath }/first.html">jQuery Tools</a>
					</li>
					<li>
						<a id="global_fpa" href="${pageContext.request.contextPath }/index.jsp">Flowplayer</a>
					</li>
				</ul>

				<ul id="acc" class="acc">
					<li>
						<a href="#">Log In</a>
					</li>
					<li>
						<a href="#">Sign Up</a>
					</li>
				</ul>





				<form id="gsearch" action="/tools/search.html">
					<input type="text" name="q" value="" />
					<button type="submit">
						Search
					</button>
				</form>
			</div>

		</div>



		<div>

			<div id="loginscroll">

				<div>

					<!-- login -->
					<form id="login" name="login" class="account">

						<p>
							<input type="text" name="login" value="username or email" />
							<br />
						</p>

						<p>
							<input type="text" name="password" value="password" />
						</p>

						<label>
							<input type="checkbox" name="remember" value="true" id="remember" />
							Stay signed in
						</label>

						<p>
							<button type="submit">
								Login
							</button>
						</p>

						<p>
							<a id="anext" href="#">Forgot your password?</a>
						</p>

					</form>

					<!-- forgot password -->
					<form id="forgot" name="forgot" class="account">

						<p>
							<input type="text" name="login" value="your email" />
							<br />
						</p>

						<p>
							<button type="submit">
								Request password
							</button>
						</p>

						<p>
							<a id="aprev" href="#">&laquo; Back to login</a>
						</p>

					</form>

				</div>

			</div>

		</div>

		<!-- signup -->
		<form id="signup" class="account">

			<p>
				<input type="text" name="email" value="email" />
				<br />
			</p>

			<p>
				You will recieve your password to this address. Address is not made
				public.
			</p>

			<p>
				<input type="text" name="username" value="username" />
			</p>

			<p>
				Your preferred username that is used when logging in.
			</p>

			<p>
				<button type="submit">
					Sign Up
				</button>
			</p>

		</form>



		<div id="wrap">







			<div class="globalnav" id="nav2">

				<a id="jqt1" href="/tools/index.html">Home</a>
				<a id="jqt2" href="/tools/download/index.html">Download</a>
				<a id="jqt3" href="/tools/demos/index.html">Demos</a>
				<a id="jqt4" href="/tools/documentation/index.html">Documentation</a>
				<a id="jqt5" href="/tools/forum/">Forums</a>



			</div>






			<div id="content">





				<style> 
#tools_index #content {
	background-image:none;
	float:none;
	margin-top:25px;
	padding:0;
	width:100%;		
}
 
#right {
	display:none;		
}
 
#tease {
	background-image:url(http://static.flowplayer.org/tools/img/1.2/banner.jpg);		
	margin-top:30px;
}
</style>

				<script>$(function() { $("#jqt1").addClass("active"); });</script>








				<style> 
 
 
img {
	border:0;		
}
 
#scroll {
	position:relative;
	height:;
	overflow:hidden;
	border:1px solid #ddd;
	width:948px;
	padding:15px;
	height:473px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
 
#tools {
	width:9999em;
	position:absolute;
	height:400px;
}
 
.tool {
	float:left;
	width:1000px;
	height:340px;
	text-align:center;
}
 
.details {
	font-size:18px;
	color:#555;
	margin-top:-20px;
	background-color:transparent;
	padding:5px 148px;
}
 
 
#thumbs {
	background:url(http://static.flowplayer.org/tools/img/demo-navi.jpg) no-repeat;
	height:90px;
	position:absolute;
	top:425px;
	width:990px;
	left:-8px;
}
 
.t {
	padding:0 !important;
	border:0 !important;
}
 
.t a {
	background:transparent url(http://static.flowplayer.org/tools/img/demo-navi.jpg) no-repeat scroll -21px -90px;
	margin-left:11px;
	display:block;
	width:99px;
	float:left;
	height:90px;
	cursor:pointer;
}
 
.t a.active {
	cursor:default !important;
}
 
.navi {
	margin-left:314px;
	_margin-left:304px;
}
 
/* CSS sprite for the navigation */
#t0 		  { margin-left:20px; _margin-left:10px;}
#t0.active { background-position:-21px 0 !important; }
#t0:hover  { background-position:-21px -180px; }
#t0:active { background-position:-21px -270px; }
 
#t1			{ background-position:-325px -90px; }
#t1:hover 	{ background-position:-325px -180px; }
#t1:active	{ background-position:-325px -270px; }
#t1.active	{ background-position:-325px 0 !important; }
 
#t2			{ background-position:-435px -90px; }
#t2:hover 	{ background-position:-435px -180px; }
#t2:active	{ background-position:-435px -270px; }
#t2.active	{ background-position:-435px 0 !important; }
 
#t3			{ background-position:-545px -90px; }
#t3:hover 	{ background-position:-545px -180px; }
#t3:active	{ background-position:-545px -270px; }
#t3.active	{ background-position:-545px 0 !important; }
 
#t4			{ background-position:-655px -90px; }
#t4:hover 	{ background-position:-655px -180px; }
#t4:active	{ background-position:-655px -270px; }
#t4.active	{ background-position:-655px 0 !important; }
 
#t5			{ background-position:-765px -90px; }
#t5:hover 	{ background-position:-765px -180px; }
#t5:active	{ background-position:-765px -270px; }
#t5.active	{ background-position:-765px 0 !important; }
 
#t6			{ background-position:-875px -90px; }
#t6:hover 	{ background-position:-875px -180px; }
#t6:active	{ background-position:-875px -270px; }
#t6.active	{ background-position:-875px 0 !important; }
</style>




				<!-- root element for everything -->
				<div id="scroll">

					<!-- scrollable items -->
					<div id="tools">



						<!-- empty slot -->
						<div class="tool">
							&nbsp;
						</div>

						<!-- tabs -->
						<div class="tool">

							<a href="/tools/tabs/index.html"> <img
									src="http://static.flowplayer.org/tools/img/hero/tabs.jpg" />
							</a>

							<div class="details">
								<strong>Tabs</strong> is the most popular JavaScript tool on the
								web. Tabs, horizontal tabs and accordions, finally done the
								right way.
							</div>

						</div>

						<!-- tooltip -->
						<div class="tool">

							<a href="/tools/tooltip/index.html"> <img
									src="http://static.flowplayer.org/tools/img/hero/tooltip.jpg" />
							</a>

							<div class="details">
								<strong>Tooltip</strong> helps you to build easier user
								interfaces. Big or small. Pluggable effects. Yet another crucial
								tool.
							</div>

						</div>

						<!-- overlay -->
						<div class="tool">

							<a href="/tools/overlay/index.html"> <img
									src="http://static.flowplayer.org/tools/img/hero/overlay.jpg" />
							</a>

							<div class="details">
								<strong>Overlay</strong> is a significant part of the
								JavaScript/Web 2.0 landscape. This tool handles them all:
								commercial overlays, modal dialogs and slideshows.
							</div>

						</div>

						<!-- scrollable -->
						<div class="tool">

							<a href="/tools/scrollable/index.html"> <img
									src="http://static.flowplayer.org/tools/img/hero/scrollable.jpg" />
							</a>

							<div class="details">
								<strong>Scrollable</strong> is the most successful tool in this
								library. Any size and shape. Infinite loops and more.
							</div>

						</div>

						<!-- FORM -->
						<div class="tool">

							<a href="/tools/release-notes/index.html#form"> <img
									src="http://static.flowplayer.org/tools/img/hero/form.jpg" />
							</a>

							<div class="details">
								<strong>FORM</strong> is a collection of essential form building
								tools. Validation, range- and date inputs for humans. New wave
								form development is here.
							</div>

						</div>

						<!-- toolbox -->
						<div class="tool">

							<a href="/tools/toolbox/flashembed.html"> <img
									src="http://static.flowplayer.org/tools/img/hero/toolbox/toolbox.jpg" />
							</a>

							<div class="details">
								<strong>TOOLBOX</strong> is a set of small niceties. Take
								control of the mousewheel and your browser's back button. Embed
								Flash and place masks over your document.
							</div>

						</div>


					</div>

					<!-- intro "page" -->
					<div id="intro" class="tool">

						<img style="margin:-17px 0 28px 0" width="721" height="346"
							alt="jQuery Tools. The ultimate UI library for web"
							src="http://static.flowplayer.org/tools/img/hero/jquerytools.jpg" />

						<div class="details">
							<strong>jQuery Tools</strong> is a collection of the most
							important user-interface components for modern websites. Used by
							large sites all over the world.
						</div>

					</div>

					<!-- required for IE6/IE7 -->
					<br clear="all" />

					<!-- thumbnails -->
					<div id="thumbs" class="t">

						<!-- intro page navi button -->
						<a id="t0" class="active"></a>

						<!-- scrollable navigator root element -->
						<div class="navi">
							<a style="display:none"></a>
							<a id="t1"></a>
							<a id="t2"></a>
							<a id="t3"></a>
							<a id="t4"></a>
							<a id="t5"></a>
							<a id="t6"></a>
						</div>

					</div>

				</div>

				<script> 
// initialize scrollable and return the programming API
var api = $("#scroll").scrollable({
	items: '#tools'
 
// use the navigator plugin
}).navigator().data("scrollable");
 
 
// this callback does the special handling of our "intro page"
api.onBeforeSeek(function(e, i) {
 
	// when on the first item: hide the intro
	if (i) {
		$("#intro").fadeOut("slow");
 
		// dirty hack for IE7-. cannot explain
		if ($.browser.msie && $.browser.version < 8) {
			$("#intro").hide();
		}
 
	// otherwise show the intro
	} else {
		$("#intro").fadeIn(1000);
	}
 
	// toggle activity for the intro thumbnail
	$("#t0").toggleClass("active", i == 0);
});
 
// a dedicated click event for the intro thumbnail
$("#t0").click(function() {
 
	// seek to the beginning (the hidden first item)
	$("#scroll").scrollable().begin();
 
});
 
</script>


				<a id="tease" href="release-notes/"></a>


				<br clear="all" />






			</div>


			<div id="right">



































				<script> 
$("#right a[href=/tools/index.html]").addClass("active"); 
</script>


				<p style="text-align:center;margin:30px 40px 30px 0">
					<a style="font-size:10px;color:#666"
						href="https://github.com/jquerytools/jquerytools/issues">report
						a bug &raquo;</a>
				</p>

				<a href="/tools/release-notes/index.html"> <img
						src="http://static.flowplayer.org/tools/img/1.2/banner-small.jpg"
						style="margin-left:10px" alt="Introducing jQuery Tools 1.2" />
				</a>


				<p style="margin:15px 0 0 22px">
					<a style="font-size:11px;color:#333"
						href="/tools/release-notes/version-1.2.x.html">What's new in
						v1.2.4 &raquo;</a>
				</p>




			</div>

			<div class="clear"></div>




			<div id="bull">
				&bull;
			</div>

			<div id="footer">

				<h2>
					jQuery Tools Twitter feed
				</h2>

				<div id="twitter">
					<div id="tweets"></div>

					<a id="follow" href="http://twitter.com/jquerytools"
						title="Follow jQuery Tools on Twitter"> jQuery Tools Twitter
						feed</a>
				</div>

				<br clear="all" />

				<div id="footerlinks">
					<a href="https://github.com/jquerytools/jquerytools">github
						repository</a>
					<a href="https://github.com/jquerytools/jquerytools/issues">report
						a bug</a>
					<a href="/tools-1.1/index.html">version 1.1</a>
				</div>

			</div>







		</div>






		<script type="text/javascript"> 
			var _tracker = _gat._getTracker("UA-5877901-1");
			_tracker._trackPageview();			
		</script>




	</body>

</html>
